<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				background-color: skyblue;
				font-size: 36px;
			}
		</style>
	</head>
	<body>
		<h1 class="color_red" id="bg_green" title="提示语" style="font-size: 24px; border: 1px solid red;">我是h1标签</h1>
		<script type="text/javascript">
			
			var h1 = document.querySelector("h1");
			// console.log(h1.getAttribute("style"));
			// h1.style.fontSize = "18px";
			// console.log(h1.style.fontSize);
			// console.log(h1.getAttribute("style"));
			// h1.setAttribute("style","font-size: 18px;");
			// console.log(h1.getAttribute("style"));
			
			getComputedStyle(h1)
			console.log(getComputedStyle(h1).width)
			
			
			// Style
			// 1.只针对行内样式
			// 2.获取值是以字符串返回,并且带有单位  24px
			// 3.可以重新设置行内样式，记得要带单位，不然无法设置
			
			
			
			// getattribute
			// 1.只针对行内属性
			// 2.获取值是以字符串返回，并且带有单位和属性名   console.log(h1.getAttribute("style"))    font-size:18px;
			//  setAttribute
			//	1.设置行内样式
			//	2.键值对进行设置
			//	3.霸道狂，不管有没有，直接重写

			// getComputedStyle
			// getComputedStyle("dom对象（标签）","伪类对象::before")
			
			
		</script>
	</body>
</html>
